<template>
    <div class="add">
        编号:
        <input type="text" v-model="code" />
        品牌名称:
        <input type="text" v-model="productName" />
        <br />产品图片地址:
        <input type="text" v-model="imgUrl" />
        价格:
        <input type="text" v-model="price" />
        <input @click="add" type="button" value="添加" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            code: "",
            productName: "",
            imgUrl: "",
            price: ""
        }
    },
    methods: {
        add() {

            //1.也要对属性进行非空验证

            if (!this.code || !this.productName || !this.imgUrl || !this.price) {
                alert('有输入框没有填')
                return
            }

            //2.获取输入框中的内容 把他整合到一个对象中

            let obj = {
                id: Math.random().toString(32).substring(2),
                price: this.price,
                code: this.code,
                productName: this.productName,
                imgUrl: this.imgUrl,
                count: 1
            }

            //3.添加到tb这个组件中的goods这个数组中
            this.$bus.$emit('add', obj)

            //4.清空输入框内容

            this.code = ""

            this.price = ""

            this.productName = ""

            this.imgUrl = ""
        }
    }
}
</script>